<template>
  <div class="fw fh">
    <div class="fw fh" id="echarts"></div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, onMounted, nextTick } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  indicator: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
  legend: {
    type: Array,
    default: () => [],
  },
});

const { proxy } = getCurrentInstance();
const init = () => {
  const chartDom = proxy.$el.querySelector("#echarts")!;
  const myChart = echarts.init(chartDom);
  const colorPrimary = getComputedStyle(document.querySelector("html")).getPropertyValue("--el-color-primary");
  const [data1, data2] = props.data;
  const [legend1, legend2] = props.legend;
  const option = {
    textStyle: {
      color: colorPrimary, // 标题字体颜色
    },
    title: {
      text: props.title,
      textStyle: {
        color: colorPrimary, // 标题字体颜色
      },
    },
    radar: {
      indicator: props.indicator,
      radius: props.legend.length ? 120 : 150,
    },
    legend: {
      data: props.legend,
      textStyle: { color: colorPrimary },
    },
    series: [
      {
        type: "radar",
        areaStyle: {},
        symbol: "none",
        data: [
          {
            name: legend1,
            value: data1,
          },
          {
            name: legend2,
            value: data2,
            lineStyle: {
              type: props.legend.length ? "" : "dashed",
            },
          },
        ],
      },
    ],
  };
  if (props.indicator.length) {
    myChart.setOption(option);
  } else {
    myChart.clear();
  }
};

defineExpose({
  init,
});
</script>

<style scoped></style>
